<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/7
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<script src="${ctx}/js/highcharts.js" type="text/javascript"></script>
<style>
    .div{
        width: 21%;
        min-width: 120px;
        height: 280px;
        margin: 18px;
        border: 1px solid #00438A;
        border-radius: 8px;
        float: left;
    }
    .d1{
        width: 100%;
        height: 35px;
        padding-top: 15px;
        border-bottom: 1px solid #00438A;
        text-align: center;
        background-color: #00BBEE;
        border-radius: 8px;
    }
    .d1 font{
        margin: 15px;
        font-weight: bold;
        color: #fff;
    }
    .d2{
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }
    .d2 font{
        margin: 15px;
        font-weight: bold;
        font-size: 90px;
    }
</style>
<script>
    $(function(){
        calcUpload('m1');
        calcUpload('m3');
        calcDownload('m2');
        calcDownload('m4');

        showTu1();
        showTu2();
    });

    function calcUpload(id){

        var data = {"fileType":'file'};
        if(id=="m3"){
            data.filePath = id;
        }
        $.ajax({
            type:'post',
            url:'${ctx}/hc/calcUpload',
            data:data,
            dataType:'json',
            success:function(result){
                var size = result;
                setNumJump(size,id,100);
            }
        })
    }
    function calcDownload(id){

        var data = {"fileType":'file'};
        if(id=="m4"){
            data.status = id;
        }
        $.ajax({
            type:'post',
            url:'${ctx}/hc/calcDownload',
            data:data,
            dataType:'json',
            success:function(result){
                var size = result;
                setNumJump(size,id,100);
            }
        })
    }

    function setNumJump(end,id,msec){
        var start = 0;
        var t = setInterval(function(){
            start++;
            if(start>end){
                clearInterval(t);
            }else{
                $('#'+id).html(start);
            }
        },msec);

    }

    //显示饼图
    function showTu1(){//json
        $.ajax({
           type:'post',
           url:'${ctx}/hc/pie',
           dataType:'json',
           success:function(result){
               result = JSON.parse(result);
               Highcharts.chart('tu1', result);
           }
        });
    }
    //显示对比图
    function showTu2(){
        $.ajax({
            type:'post',
            url:'${ctx}/hc/blc',
            dataType:'json',
            success:function(result){
                result = JSON.parse(result);
                Highcharts.chart('tu2', result);
            }
        });
    }
</script>
<div style="min-width:550px;width: 100%;height: 300px;border: 0px solid #000;text-align: center;">
    <div class="div">
        <div class="d1" style="background-color: #00EE00;">
            <font>上传文件次数</font>
        </div>
        <div class="d2">
            <font id="m1">0</font>
        </div>
    </div>
    <div class="div">
        <div class="d1" style="background-color: #0000FF;">
            <font>下载文件次数</font>
        </div>
        <div class="d2">
            <font id="m2">0</font>
        </div>
    </div>
    <div class="div">
        <div class="d1" style="background-color: #2A3E93;">
            <font>今日上传量</font>
        </div>
        <div class="d2">
            <font id="m3">0</font>
        </div>
    </div>
    <div class="div">
        <div class="d1">
            <font>今日上下载量</font>
        </div>
        <div class="d2">
            <font id="m4">0</font>
        </div>
    </div>
</div>
<div style="float:left;min-width:550px;width:45%;
			height: 600px;border: 0px solid #000;margin-top: 15px;margin-left: 15px;">
    <div class="d1">
        <font>各种文件数量饼图</font>
    </div>
    <div class="d2">
        <div id="tu1" style="min-width: 550px;height: 450px;text-align: center"></div>
    </div>
</div>
<div style="float:left;min-width:550px;width:45%;
			height:600px;border: 0px solid #000;margin-top: 15px;margin-left: 20px;">
    <div class="d1">
        <font>每日文件上传下载对比图</font>
    </div>
    <div class="d2">
        <div id="tu2" style="min-width: 550px;height: 450px;text-align: center"></div>
    </div>
</div>
</body>
</html>
